fix: Added fetchPriority and removed#1144
Conversation
|
Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖 Please select which version do you want to release:
And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.
|
|
Beep boop 🤖 I noticed you didn't make any changes at the
In order to keep track, I'll create an issue if you decide now is not a good time
|
|
/review |
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
|
/improve |
PR Code Suggestions ✨
|
|||||||||||||
|
/improve --pr_code_suggestions.commitable_code_suggestions=true |
| @@ -94,7 +94,6 @@ const ProductImage: FC<Props> = ({ | |||
| > | |||
| <img | |||
There was a problem hiding this comment.
Suggestion: Avoid setting a low fetch priority when loading="lazy" is used; browsers treat lazy images as low priority automatically, and explicitly forcing low can harm above-the-fold cases when index logic changes. Only set fetchPriority="high" for the first image and omit it otherwise to prevent unintended network prioritization issues. [general, importance: 6]
There was a problem hiding this comment.
Pull Request Overview
This PR improves LCP performance by adding fetchPriority to the ProductImage component and removing the data-vtex-preload attribute, following PageSpeed Insights recommendations.
- Added fetchPriority attribute with 'high' priority for first image and 'low' for subsequent images
- Removed data-vtex-preload attribute to ensure fetchPriority takes effect
- Updated changelog to document the changes
Reviewed Changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| react/components/ProductImages/components/ProductImage.tsx | Added fetchPriority attribute and removed data-vtex-preload to optimize LCP |
| CHANGELOG.md | Documented the ProductImage component changes |
|
Your PR has been merged! App is being published. 🚀 After the publishing process has been completed (check #vtex-io-releases) and doing A/B tests with the new version, you can deploy your release by running:
After that your app will be updated on all accounts. For more information on the deployment process check the docs. 📖 |
What problem is this solving?
Adds fetchPriority to ProductImage to improve LCP, as recommended by PageSpeed Insights.
Removes data-vtex-preload to ensure fetchPriority takes effect.
How to test it?
Workspace
Screenshots or example usage:
Before
After
Describe alternatives you've considered, if any.
Related to / Depends on
How does this PR make you feel? 🔗
